<template>
	 <div class="activiesBar" ref="activities">
        <span :class="saleType[promotions.saleType][1]" style="margin-right:.2rem;margin-right: 3px;">{{saleType[promotions.saleType][0]}}</span>
        <div style="flex: 1;">
            <div class="title">
                <span class="activityName">{{promotions.promName}}</span>
                <!-- <div>
                    <span class="arrow" ref="arrow" v-if="promotions.auditOpinion && promotions.saleType != 'specialOffer' && promotions.saleType != 'discount'"><i class="icon njfont nj-youjiantou"></i></span>
                    <span class="arrow" ref="arrow" v-if="promotions.saleType == 'specialOffer' || promotions.saleType == 'discount'"><i class="icon njfont nj-youjiantou"></i></span>
                </div>  -->
            </div>
            <div class="activeCond" ref="activeCond">
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'buyPresent' && promotions.prefWay != 3">{{promotions.auditOpinion}}</span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'buyPresent' && promotions.prefWay == 3"><span v-for="(item,index) in promotions.auditOpinion.split('&')" :key="index" style="display:block;">{{item}}</span></span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'specialOffer'">{{promotions.auditOpinion}}</span> 
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'discount'">{{promotions.auditOpinion}}</span> 
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'overBuy' && promotions.prefWay != 3">{{promotions.auditOpinion}}</span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'overBuy' && promotions.prefWay == 3"><span v-for="(item,index) in promotions.auditOpinion.split('&')" :key="index" style="display:block;">{{item}}</span></span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'rebate' && promotions.prefWay != 3">{{promotions.auditOpinion}}</span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'rebate' && promotions.prefWay == 3"><span v-for="(item,index) in promotions.auditOpinion.split('&')" :key="index" style="display:block;">{{item}}</span></span> 
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'fullCut' && promotions.prefWay != 3">{{promotions.auditOpinion}}</span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'fullCut' && promotions.prefWay == 3"><span v-for="(item,index) in promotions.auditOpinion.split('&')" :key="index" style="display:block;">{{item}}</span></span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'fullDiscount' && promotions.prefWay != 3">{{promotions.auditOpinion}}</span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'fullDiscount' && promotions.prefWay == 3"><span v-for="(item,index) in promotions.auditOpinion.split('&')" :key="index" style="display:block;">{{item}}</span></span>
                <span style="color: #8A8A8A;display:block;" v-if="promotions.saleType == 'ladderFull'">{{promotions.auditOpinion}}</span>
                <span class="activityTime">活动时间：{{GetDateDiff(promotions.startTime.split(" ")[0]).split("/")[1]}}.{{GetDateDiff(promotions.startTime.split(" ")[0]).split("/")[2]}}-{{GetDateDiff(promotions.endTime.split(" ")[0]).split("/")[1]}}.{{GetDateDiff(promotions.endTime.split(" ")[0]).split("/")[2]}}</span>
            </div>
            <!-- <div class="activeInfo" ref="activeInfo"> -->
                <!-- <span style="color: rgb(102, 102, 102);" @click="gogogo">{{promotions.promName}}</span> -->
                <!-- <span style="color: rgb(102, 102, 102);" @click="gogogo">同时购买<span v-for="(item,index) in regularList.regularPackageList[0].regularPackageGoodsList" :key="index">{{item.goodsQuantity}}份{{item.goodsName}}<span v-if="index != regularList.regularPackageList[0].regularPackageGoodsList.length - 1">和</span></span>可享受{{regularList.regularPackageList[0].packagePrice}}元特价
                </span> -->
            <!-- </div>  -->
        </div>
	</div> 
</template>
<script>
	export default {
		props: {
            promotions: {
                type: Object,
                default: {}
            },
        },
        components:{
            
        },
		data () {
			return {
                saleType:{
                    "buyPresent":["赠","buyPresent"],
                    "specialOffer":["特","specialOffer"],
                    "discount":["折","discount"],
                    "overBuy":["多","overBuy"],
                    "rebate":["返","rebate"],
                    "fullCut":["减","fullCut"],
                    "fullDiscount":["满","fullDiscount"],
                    "package":["组","package"],
                    "coupon":["券","coupon"]
                },
                activitiesHeight: 26
			}
		},
		computed: {
            
		},
		methods: {
            GetDateDiff(time) {    
                return time.replace(/\-/g, "/");  
            },
            spread(){
                let activities = this.$refs.activities;
                let arrow = this.$refs.arrow;
                let activeCondHeight = this.$refs.activeCond.offsetHeight;
                if(parseInt(activities.style.height) > this.activitiesHeight){
                    activities.style.height = this.activitiesHeight + "px";
                    arrow.style.transform = 'rotate(0)';
                }else{
                    activities.style.height = this.activitiesHeight + activeCondHeight + "px";
                    arrow.style.transform = 'rotate(90deg)';
                }
            },
            gogogo(){
                this.$router.push("regularmeal?regularId=" + this.regularList.regularId);
            }
        },
        created () {
            
        },
        mounted () {
            let activities = this.$refs.activities;
            this.activitiesHeight = activities.offsetHeight;
        },
        beforeDestroy() {
            
        },
        watch: {
            
        }
	}
</script>

<style scoped>
    .activiesBar{
         margin-left: .8rem; 
        /* height:1.3rem; */
        transition: .5s all;
        /* overflow: hidden; */
        padding: 0.1rem 0;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .activiesBar i{
        color:#a0a0a0;
        font-size: 0.7rem
    }
    .package{
        font-size:12px;
        background: #EF5423;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
    }
    .blank{
        margin-right: 0.2rem;
        font-size:12px;
        background: white;
        padding: 2px;
        border-radius: .2rem;
        color: white;
    }
    .activityName{
        display: inline-block;
        /* width: 10rem; */
        color: #444444;
        text-align: left;
        line-height: 1.2rem;
        overflow: hidden;
        /* white-space: nowrap; */
        text-overflow: ellipsis;
    }
    .activityTime{
        display: inline-block;
        height: 100%;
        line-height: 23px;
        color: #8A8A8A;
        text-align: left;
    }
    .title{
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .arrow{
        display: inline-block;
        margin:0 0.2rem;
        width: 14px;
        height: auto;
        transition: .5s all;
        transform: rotate(0deg);
        transform-origin: .25rem 0.45rem;
        /* border-top: 10px solid rgb(102, 102, 102);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 0px solid transparent; */
        color:#a0a0a0
    }
    .arrow img{
        width: 80%;
        margin-top: .25rem;
        transform: rotate(90deg);
    }
    .activeCond{
        width: 95%;
        /* height: 23px; */
        text-align: left;
    }
    .activeInfo{
        width: 95%;
        height: 0px;
        text-align: left;
    }
    .buyPresent{
        font-size:12px;
        background: #70BD46;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .specialOffer{
        font-size:12px;
        background: #F1894E;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .discount{
        font-size:12px;
        background: #F17272;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .overBuy{
        font-size:12px;
        background: #f3ac60;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .rebate{
        font-size:12px;
        background: #FF7238;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .fullCut{
        font-size:12px;
        background: #F17272;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }

    .fullDiscount{
        font-size:12px;
        background: #FFAD2A;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
        height: auto;
    }
</style>


